<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
    *{margin: 0;padding: 0}
    .wrapper{  /* 整个背景  */
        width: 1233px;
        height: 946px;
        background-color: #322B25;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .box{   /*  红色绸缎  */
        width: 1233px;
        margin-top: 16px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .box>div{
        height:44px;
        margin-top: 21px;
        background: url("images/head.png") repeat-x;
        border-radius: 5px 5px 0 0;
    }
    .box-logo{  /* 烘焙logo  */
        width: 350px;
    }
    .box-logo img{
        margin: 5px 4px 0 2px;
        width: 30px;
        float: left;
    }
    .box-logo>h4{
        font-weight: bold;
        color: white;
        margin-top: 3px;
    }
    .box-logo>p{
        color: #D7A77E;
        font-size: 10px;
    }
    .left{
        width: 381px;
        margin-right: 2px;
    }
    .right{
        width: 850px;
    }
    .main-left{  /*左侧内容  */
        width: 371px;height: 783px;
        float: left;
    }
    .top{ /* 黑侠   */
        width: 381px;height: 126px;
        background: url("images/top.png") repeat-x;
        position: relative;
        float: left;
    }
    .top-1-3{
        width: 300px;height: 40px;
        margin-left: 10px;
    }
    .top-1-4{
        width: 300px;height: 40px;
        margin-left: 10px;
    }
    .top-1-3 img{
        width: 22px;height: 25px;
        float: left;
        margin: 12px 10px 0 0;
    }
    .top-1-4 img{
        width: 22px;height: 25px;
        float: left;
        margin: 8px 10px 0 0;
    }
    .top-1-3>p{
        color: #D7A77E;
        font-size: 15px;
        padding-top: 15px;
    }
    .top-1-4>p{
        color: #D7A77E;
        font-size: 15px;
        padding-top: 10px;
    }
    .top-1{  /* 收支明细 */
        width: 380px;height:40px;
        position: absolute;
        /* float: left; */
        bottom: 0;
        box-shadow: 0 -2px 11px #312520;/* 阴影 */
        background: url("images/bg.png") repeat-x;
    }
    .top-1-2{
        width: 350px;height: 40px;
        float: left;
        text-align: left;
        margin-left: auto;margin-right: auto;
    }
    .top-1-2 img{
        margin: 6px 5px 6px 7px;
        float: left;
        width: 20px;height: 25px;
    }
    .top-1-2>h3{
        color: #EBE9EB;
        margin: 5px 0 0 10px;
    }
    .buoy{ /* 浮标  */
        height: 652px;width: 46px;
        position: relative;
        float: left;
        margin: 45px 0 0 335px;
        background-color: #111;
        opacity: 0.5;
    }
    .buoy img{
        width: 34px;
        margin: 17px 0 0 6px;
    }
    table{
        width:381px;height: 200px; 
        border-collapse: collapse;
        background-color: #F0E5D1;
        clear: left;
    }
    th,td{
        padding: 4px;
        color: #774026;
        text-align: left;
        border-bottom: 1px solid #FDFBEF;
    }
    tr:hover{background-color: salmon;}
    .space{
        width: 88px;
        padding-left: 30px;
    }
    .free{
        float: left;
        padding-bottom: 11px;
        width: 115px;
        position: absolute;
    }
    .free img{
        width: 20px;height: 20px;
    }
    .top-2{
        width: 381px;height: 250px;
        background: url("images/shouzibg.png") repeat;
        clear: left;
    }
    .top-3{
        overflow: auto;
        width: 381px;height: 200px;
        background-color:#ffc773;
        box-shadow: 0 -2px 11px #312520;/* 阴影 */
    }
    .top-3-1{  /* 总额  */
        width: 246px;
        background-color: #F3E7BF;
        margin-top: 40px;
        padding: 5px 10px 5px 10px;
        margin-left: auto;margin-right: auto;
        overflow: auto;
    }
    .top-3-1>h1{
        color: red;
        font-weight: bold;
        float: left;
    }
    .top-3-1>p{
        color: red;
        font-weight: bold;
        font-size: 30px;
        float: right;
    }
    .top-3-2{ /* 搜索商品  */
        width: 215px;height: 100px;
        overflow: auto;
        float: left;
        margin-left: 34px;
    }
    .top-3-2>input{ 
        /* outline: none; */
        /* border: none; */
        position: relative;
        float: left;
        width: 200px;height: 30px;
        border-radius: 25px;
        margin: 10px 0 0 10px;
    }
    .top-3-2 img{
        position: absolute;
        width: 20px;height: 20px;
        float: right;
        margin: 16px 2px 29px -25px;
    }
    .top3-3{   /* 搜索 */
        width: 44px;height: 34px;
        float: right;
        background-color: white;
        border-radius: 35%;
        margin: 10px 56px 0 0;
    }
    .top3-3 img{
        width: 21px;height: 18px;
        margin: 0 0 -10px 12px;
    }
    .main-right{ /* 右侧内容 */
        width: 850px;height: 783px;
        float: right;
    }
    .side{
        width: 840px;
        float: right;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 10px;
    }
    .kind{
        height:44px;width: 120px;
        margin-left: 15px;
        font-size: 18px;
        /* font-weight: bolder; */
        color: #945A2D;
        background-color: #ECBD85;
        border: none;
    }
    .kind:hover{
        background-color: #C64130;
        color: white;
    }
    .updw{
        width:42px;
        margin-left: 15px;
        font-size: 20px;
        font-weight: bolder;
        color: #945A2D;
        background-color: #ECBD85;
        border: none;
    }
    .updw:hover{
        background-color: #C64130;
        color: white;
    }
    .side-2{  /* 环 */
        width: 76px;height: 721px;
        float: left;
        margin-left: 14px;
        border-radius: 10% 0 0 10%;
        box-shadow: -5px 0 5px #111;
        background: url("images/bg2.png") repeat-y;
    }
    .side-3{
        width: 745px;height: 721px ;
        border-radius: 0 1% 1% 0;
        box-shadow: 5px 0px 5px #333;
        position: relative;
        margin: 54px 0 0 90px;
        background: white;
    }
    .side-3>div{
        position: absolute;
        width: 100%;height: 100%;
    }
    .model{
        margin-left: 25px;
        margin-top: 10px;
    }
    .mike{
        display: none;
    }
    /*iframe{
        width: 711px;
        height: 717px;
      border: none; 
    } */
    .footer{ /* 底部 */
        width: 1200px;
        clear: left;
    }
    .footer-2{  /* 底左部 */
        width: 350px;
        float: left;
        color: #E3DBC4;
        margin: 10px 0 0 10px;
    }
    .footer-3{  /* 底右部  */
        width: 613px;
        margin-left: 22px;
        display: flex;
        flex-direction: column;
        float: left;
        margin-top: 10px;
    }
    .footer-3-1{  /* 左 */
        width: 550px;
        float: left;
        display: flex;
        margin-left: 61px;
    }
    .footer-3-1>div{
        width: 253px;
        justify-content: space-evenly;
    }
    .footer-3-1>img{
        width: 30px;height: 30px;
        float: left;
    }
    /*.footer-3-2>p{
        color: white;
        font-size: 13px;
    }*/
    .footer-3-2{
        width: 560px;
        margin-left: 62px;
        display: flex;
    }
    .footer-3-2>div{
        width: 95px;
        color: white;
    }
    a{
        
        text-decoration: none;
        width: 95px;
        color: white;
    }
    .footer-4{  /* 右 */
        width: 100px;
        float: right;
    }
    .footer-4>button{  /* 右-收银 */
        width: 160px;
        background-color:#C33E2B;
        color: white;
        border: 9px solid #C33E2B;
        float: right;margin-right: 34px;
        margin-top: 16px;padding-left: 25px;padding-right: 16px;
        font-size: 27px; 
    }
    .footer-4>button>img{
        width: 30px;
        float: left;
        margin-top: 6px;
    }
    .footer-4>button>p{
        color: white;
        float: right;
        font-size: 31px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="left">
                <div class="box-logo">
                    <img src="images/logo.png" alt="" >
                    <h4>烘焙+</h4>
                    <p>HONGBEI</p>
                </div>
            </div>
            <div class="right"></div>
        </div>
        <div class="main-left"> <!--左侧内容-->
            <div class="top">
                <div class="top-1-3">
                    <img src="images/user.png" alt="">
                    <p>黑侠（光谷店）</p>
                </div>
                <div class="top-1-4">
                    <img src="images/time.png" alt="">
                    <p>2016-04-06 10:23 AM</p>
                </div>
                <div class="top-1">
                    <div class="top-1-2">
                        <img src="images/menu.png" alt="" >
                        <h3>收支明细</h3>
                    </div>
                </div>
                <div class="buoy">
                    <img src="images/关闭.png" alt="关闭" >
                    <img src="images/增加.png" alt="增加" >
                    <img src="images/减少.png" alt="减少" >
                    <img src="images/赠送.png" alt="赠送" >
                    <img src="images/修改.png" alt="修改" >
                    <img src="images/椭圆-12.png" alt="挂单" >
                    <img src="images/椭圆-12-拷贝.png" alt="咔" >
                </div>
            </div>
            <table>
                <tr>
                    <th class="space">品名</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>结算价</th>
                </tr>
                <tr>
                    <td class="space">蛋挞</td>
                    <td>5</td>
                    <td>60</td>
                    <td>60</td>
                </tr>
                <tr>
                    <td class="space">全麦面包</td>
                    <td>1</td>
                    <td>10.5</td>
                    <td>10.5</td>
                </tr>
                <tr>
                    <td class="free">
                        <img src="images/曾.png" alt="赠品" >
                        <span>戚风蛋糕</span>
                    </td>
                    <td>1</td>
                    <td>20</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td class="space">三明治</td>
                    <td>5</td>
                    <td>60</td>
                    <td>60</td>
                </tr>
            </table>
            <div class="top-2"></div>
            <div class="top-3">
                <div class="top-3-1">
                    <h1>总额：</h1>
                    <p>￥125.5</p>
                </div>
                <div class="top-3-2">
                    <input type="text" value="   搜索商品"> 
                    <img src="images/Layer-6.png" alt="">
                </div>
                <div class="top3-3">
                    <img src="images/搜.png" alt="" >
                </div>
            </div>
        </div>
        <div class="main-right"> <!--右侧内容-->
            <div class="side">
                <button class="kind">戚风蛋糕</button>
                <button class="kind">蛋挞</button>
                <button class="kind">全麦面包</button>
                <button class="kind">戚风蛋糕</button>
                <button class="kind">三明治</button>
                <button class="updw">↿⇂</button>
            </div>
            <div class="side-2"></div>
            <div class="side-3">
                <div>
                    <ul class="model">
                        <li>巧克力蛋糕</li>
                        <li>黑森林蛋糕</li>
                    </ul></div>
                <div class="mike">
                    <ul class="model">
                        <li>葡式蛋挞</li>
                        <li>原味蛋挞</li>
                    </ul>
                </div>
                <div class="mike">
                    <ul class="model">
                        <li>全麦面包</li>
                        <li>全黑面包</li>
                    </ul>
                </div>
                <div class="mike">
                    <ul class="model">
                        <li>牛奶蛋糕</li>
                        <li>草莓蛋糕</li>
                    </ul>
                </div>
                <div class="mike">
                    <ul class="model">
                        <li>肉松三明治</li>
                        <li>火腿三明治</li>
                    </ul>
                </div>
                <div class="mike">
                    <ul class="model">
                        <li>戚风蛋糕</li>
                        <li>蛋挞</li>
                        <li>全麦面包</li>
                        <li>三明治</li>
                    </ul>
                </div>
            </div>
         <!--   <iframe src="images/timg.jpg" id="a"></iframe> -->
        </div>
        <div class="footer">
            <div class="footer-2">
                <p>会员信息：</p>
            </div>
            <div class="footer-3">
                <div class="footer-3-1">
                    <div>
                        <img src="images/组-15.png" alt="">
                    </div>
                    <div>
                        <img src="images/购物卡.png" alt="">
                    </div>
                    <div>
                        <img src="images/会员.png" alt="">
                    </div>
                    <div>
                        <img src="images/促销.png" alt="">
                    </div>
                    <div>
                        <img src="images/订货.png" alt="">
                    </div>
                    <div>
                        <img src="images/交班.png" alt="">
                    </div>
                    <div>
                        <img src="images/挂单.png" alt="">
                    </div>
                </div>
                <div class="footer-3-2">
                    <div><a href="#">管理台</a></div>
                    <div><a href="#">购物卡</a></div>
                    <div><a href="#">会员</a></div>
                    <div><a href="#">促销</a></div>
                    <div><a href="#">约定</a></div>
                    <div><a href="#">交班</a></div>
                    <div><a href="#">挂单</a></div>
                </div>
            </div>
            <div class="footer-4">
                    <button>
                        <img src="images/money.png" alt="">
                        <p>收银</p>
                    </button>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $('.side>button').click(function(){
                $(this).addClass("current").siblings().removeClass("current")
                console.log($(this).index())
                $(".side-3>div").eq($(this).index()).show(300).siblings().hide(300)
            })
        })
    </script>
</body>
</html>